<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			* {
				margin: 0 auto;
			}
			
			.content {
				width: 800px;
				height: 100px;
				background: #f9f9f9;
				border-radius: 5px;
				box-shadow: 0 3px 10px #666;
				margin: 50px auto;
			}
			
			.picwarp {
				width: 120px;
				height: 98px;
				border: 1px solid #fff;
				float: left;
			}
			
			.picwarp img {
				width: 100%;
				height: 100%;
			}
			
			.warp:after {
				content: '';
				display: block;
				clear: both;
			}
			
			.warp input {
				display: block;
				float: right;
				background: none;
				border: 2px solid #fff;
				border-radius: 2px;
				width: 80px;
				height: 30px;
				margin-top: 30px;
				margin-right: 30px;
			}
			
			.car {
				float: right;
				position: relative;
				width: 80px;
				height: 40px;
				color: red;
				font-size: 30px;
				font-weight: bold;
				right: -100px;
				top: -40px;
				background-image: url(images/1.png);
				background-size: 100% 90%;
				background-repeat: no-repeat;
			}
			
			.text {
				float: left;
			}
			
			.text h4 {
				padding-left: 40px;
				padding-top: 20px;
			}
			
			.text h3 {
				padding-top: 15px;
				padding-left: 40px;
				color: red;
			}
		</style>
		<script src='cookie.js'></script>
		<script>
			window.onload = function() {
				var add = document.getElementById('add');
				var redu = document.getElementById('reduce');
				var num = 0;
				var res = document.getElementById('num');
				var buy = document.getElementById('buy');
				add.onclick = function() {
					num++
					res.innerHTML = num;
				}

				redu.onclick = function() {
					if(num > 0) {
						num--
						res.innerHTML = num;
					}
				}
				buy.onclick = function() {
					var resNum = res.innerHTML;
					cookie.setCookie('num', resNum);
					window.location.href = 'shopCar.html'

				}
			}
		</script>
	</head>

	<body>
		<div class="content">
			<div class="warp">
				<div class="picwarp">
					<img src="images/2.png" alt="">
				</div>
				<div class="text">
					<h4>ins小清新玫瑰感化客厅装饰花瓶</h4>
					<h3>售价：18</h3>
				</div>
				<input type="button" id="buy" value='立即购买'>
				<input type="button" id='add' value='增加'>
				<input type="button" id='reduce' value='减少'>
			</div>

			<div class="car">
				<span class='num' id='num'>0</span>
			</div>

		</div>
	</body>

</html>